import { MyHead } from "../../../components/head"
import { Form, Button, Toast} from "antd-mobile"
import { useRef,useState,useEffect } from 'react'
import { reg } from "../../../util/reg"; 
import { FormInstance } from "antd-mobile/es/components/form";
import { PassCom } from "../../../components/PassCom";

import '../../../styles/homes/setpass.scss'
import { HK } from "../../../components/HuaKuai";
import { changePass } from "../../../api/user";
import { useLocalStorageState } from "ahooks";
import { useTiaoZhuan } from "../../../hooks/routers";

const SetPass = ()=>{
    const {Tz} = useTiaoZhuan()
    type formsType = {
        oldpass: string
        newpass: string
        newpasstwo: string
    }
    const formRef = useRef<FormInstance>({} as FormInstance)
    const [show,setshow] = useState(false)
    const [phone,setphone] = useLocalStorageState<string | null>('phone')
    const onFinish = async(value:formsType)=>{
        let res = await changePass(phone!,value.newpass);
        console.log(res);
        
    }
    useEffect(()=>{
        phone || Tz("/login")
    },[])
    return(
        <div className="myWd">
            <HK show={show} setshow={setshow} callback={onFinish}/>
            <MyHead title='修改密码'/>
            <Form
                style={{ padding: "0 10px", fontSize: '14px', }}
                ref={formRef}
                onFinish={onFinish}
                onFinishFailed={() => Toast.show({
                    content: '表单验证失败',
                })}
                layout='horizontal'
                footer={
                    <div >
                        <Button
                            style={{marginBottom:'10px'}}
                            block
                            color='primary'
                            size='middle'
                            onClick={()=>setshow(true)}
                        >
                            修改密码
                        </Button>
                        <Button
                            block
                            color='danger'
                            type='reset'
                            size='middle'
                        >
                            重置
                        </Button>
                    </div>

                }>
                <PassCom label='旧密码' name='oldpass' help='请输入旧密码' dependencies={['newpass']}/>
                <PassCom label='新密码' name='newpass' help='请输入新密码' dependencies={['newpasstwo','oldpass']}rules={[
                        ({ getFieldValue }:{ getFieldValue: (fieldName: string) => any; }) => ({
                            validator(_: any, value: string) {
                                // 如果通过第二个密码的规则测试
                                if (reg.pwd.test(value)) {
                                    // 如果密码不为空 而且关联的密码相同
                                    if (!value.trim() || getFieldValue('oldpass') !== value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('新密码不能和旧密码一样'));
                                } else {
                                    return Promise.reject()
                                }
                            },
                        }),
                    ]}/>
                <PassCom label='请再次输入新密码' name='newpasstwo' help='请再次输入新密码' dependencies={['newpass']}  rules={[
                        ({ getFieldValue }:{ getFieldValue: (fieldName: string) => any; }) => ({
                            validator(_: any, value: string) {
                                // 如果通过第二个密码的规则测试
                                if (reg.pwd.test(value)) {
                                    // 如果密码不为空 而且关联的密码相同
                                    if (!value.trim() || getFieldValue('newpass') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('两次密码不匹配'));
                                } else {
                                    return Promise.reject()
                                }
                            },
                        }),
                    ]}/>

            </Form>
        </div>
    )
}

export default SetPass